<template>
  <div v-loading="loading" class="app-container">
    <div style="width:820px;border:1px solid #ddd;padding:20px;">
      <div v-for="dir in dirtionarys" :key="dir.id">
        <div class="dirtionary">
          <span class="dirtionary-label">{{ dir.name }} -{{ dir.code }}</span>
          <div style="float:right;">
            <el-button type="text" @click="addItem(dir.code,dir)"><i class="el-icon-circle-plus" /> 新增</el-button>
          </div>
        </div>
        <div v-for="item in dir.items" :key="item.id" class="clearfix">
          <div v-if="item.status===1" class="dirtionary-item">
            <span class="dirtionary-item-label">{{ item.code }}</span>
            <span>{{ item.name }}</span>
            <div v-if="!item.isSystem" style="float:right;">
              <el-button type="text" class="green inline-btn" size="mini" @click="editItem(item)">编辑</el-button>
              <el-button type="text" class="red inline-btn" size="mini" @click="deleteItem(item.id,item)">删除</el-button>
            </div>
          </div>
          <div v-else class="dirtionary-item">
            <span class="dirtionary-item-label"><del>{{ item.code }}</del></span>
            <span><del>{{ item.name }}</del></span>
            <div v-if="!item.isSystem" style="float:right;">
              <el-button type="text" class="orange inline-btn" size="mini" @click="recoverItem(item.id,item)">恢复</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--表单组件-->
    <eForm ref="eform" />
  </div>
</template>

<script>
import request from '@/utils/request'
import eForm from './form'
import { resetCache } from '@/api/basedata'
export default {
  name: 'Dirtionary',
  components: { eForm },
  data() {
    return {
      dirtionarys: [],
      loading: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      request({ url: '/sys/dirtionary/getAll', method: 'get' }).then(data => {
        this.dirtionarys = data
        this.loading = false
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    addItem(parentCode, dir) {
      this.$refs.eform.add(parentCode, dir)
    },
    editItem(item) {
      this.$refs.eform.edit(item)
    },
    deleteItem(id, item) {
      this.$confirm('此操作将删除所选条目:(' + item.code + ')' + item.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({ url: '/sys/dirtionary/deleteItem', method: 'get', params: { 'id': id }}).then(res => {
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
          this.getList()
          // --
          resetCache('dirtionary')
        }).catch(err => {
          this.$message.error(err.message)
        })
      })
    },
    recoverItem(id, item) {
      this.$confirm('此操作将恢复所选条目:(' + item.code + ')' + item.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({ url: '/sys/dirtionary/recoverItem', method: 'get', params: { 'id': id }}).then(res => {
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
          this.getList()
          // --
          resetCache('dirtionary')
        }).catch(err => {
          this.$message.error(err.message)
        })
      })
    }
  }
}
</script>

<style scoped>
.dirtionary {
    margin: 5px 0;
    padding:6px 10px;
    height:44px;
    color: #333;
    text-decoration: none;
    border: 1px solid #e7eaec;
    background: #f5f5f5;
    border-radius: 3px;
    box-sizing: border-box;
}
.dirtionary-label {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    border-radius: .25em;
    background-color: #f0ad4e;
    display: inline-block;
}
.dirtionary-item{
    margin-bottom: 5px;
    margin-left:25px;
    padding: 6px 10px;
    color: #333;
    text-decoration: none;
    border: 1px solid #e7eaec;
    background: #F0FFF0;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
}
.dirtionary-item-label{
    padding: 2px 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    border-radius: .25em;
    background-color: #5bc0de;
    display: inline-block;
}

.dirtionary:hover {
    background: #f0f0f0!important;
    cursor: pointer;
}
.dirtionary-item:hover {
    background: #f0f0f0!important;
    cursor: pointer;
}

</style>
